<template>
  <div class="login_container" ref="vantaRef">
    <div ref="vantaRef" class="net"></div>
    <el-form
      ref="loginForm"
      :model="loginForm"
      label-width="80px"
      class="login_form"
      :rules="loginRules"
    >
      <h1>WELCOME !</h1>
      <h2>欢迎来到计算推演开放平台</h2>
      <el-form-item prop="loginName">
        <el-input v-model="loginForm.loginName" placeholder="请输入用户名">
          <i slot="prefix" class="el-icon-user"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          show-password
          placeholder="请输入密码"
        >
          <i slot="prefix" class="el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin" class="login_btn"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { transPsw } from "@/utils/encrypted";
import * as THREE from "three";
import BIRDS from "vanta/src/vanta.net";
export default {
  data() {
    return {
      loginForm: {
        loginName: "",
        password: "",
        verifyCode: "",
      },
      loginRules: {
        loginName: [{ required: true, message: "用户名必填", trigger: "blur" }],
        password: [
          { required: true, message: "用户密码必填", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE,
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      scale: 1.0,
      scaleMobile: 1.0,
      color: 0x3f82ff,
    });
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy();
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 处理登录逻辑，可以发送登录请求等
          this.loginApi();
        }
      });
    },
    async loginApi() {
      const obj = {
        loginName: this.loginForm.loginName,
        password: transPsw(this.loginForm.password),
        verifyCode: "",
      };
      let res=await this.$store.dispatch("user/Login", obj);
      if (res === "ok") {
        this.$notify({
          title: "登录成功!",
          type: "success",
        });
        this.$router.push({
          path: "/home",
        });
      } else {
        this.$notify.error({
          title: "登录失败",
        });
      }
    
    },
  },
};
</script>

<style scoped lang="less">
.login_container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .net {
    width: 100%;
    height: 100%;
  }
  /deep/.el-form-item__label {
    color: #fff !important;
  }
  .login_form {
    width: 40%;
    position: absolute;
    z-index: 66;
    left: 50%;
    transform: translateX(-50%);
    top: 30vh;
    background: url("../../assets/images/login_form.png") no-repeat;
    background-size: cover;
    padding: 40px;
    /deep/.el-input {
      background-color: transparent !important;
      color: #ffffff !important;
    }
    /deep/ .el-input__inner {
      background: transparent !important;
      color: #ffffff !important;
    }
    h1 {
      color: #fff;
      font-size: 40px;
    }

    h2 {
      color: #fff;
      font-size: 20px;
      margin: 20px 0px;
    }
    .login_btn {
      width: 100%;
      background-color: transparent;
      color: #409eff;
    }
  }
}
</style>
